<template>
    <div class="zxtBox">
        <div ref="chartRef" style="width: 100%; height: 100%;"></div>
    </div>
</template>
<script setup>
import { ref, onMounted, watch, defineProps } from 'vue';  // 添加nextTick引用
import * as echarts from 'echarts';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
const props = defineProps({
    data: {
        type: Array,
        default: () => [
            { name: '新鲜果蔬', values: [400, 380, 300, 280, 320, 350, 370, 360, 380, 400, 390, 410] },
            { name: '粮油副品', values: [200, 220, 250, 230, 240, 260, 280, 270, 290, 300, 310, 320] },
            { name: '禽畜肉类', values: [150, 160, 180, 170, 190, 200, 210, 220, 230, 240, 250, 260] },
            { name: '水产品', values: [300, 310, 290, 280, 270, 260, 250, 240, 230, 220, 210, 200] }
        ]
    }
});
const chartRef = ref(null);
let chartInstance = null
const option = ref(null);
const initChart = () => {
    chartInstance = echarts.init(chartRef.value);
    option.value = {
        grid: {
            top: '20%',
            right: '3%',
            bottom: '12%',
            left: '3%'
        },
        legend: {
            data: props.data.map(item => item.name),
            textStyle: {
                color: '#fff'
            },
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 14
        },
        xAxis: {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            axisLabel: { color: '#fff' },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: { color: '#fff' },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.3)'
                }
            }
        },
        series: props.data.map(item => ({
            name: item.name,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
                width: 2
            },
            data: item.values
        }))
    };
    chartInstance.setOption(option.value);
}
onMounted(() => {
    initChart();
    window.addEventListener('resize', () => chartInstance?.resize());
})
watch(() => props.data, (newVal) => {
    if (!chartInstance) return;
    // 新增空数组处理
    if (Array.isArray(newVal) && newVal.length === 0) {
        chartInstance.clear();
        return;
    }
    const newOption = JSON.parse(JSON.stringify(option.value)); 
    newOption.legend.data = newVal.map(item => item.name);
    newOption.series = newVal.map(item => ({
        name: item.name,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
            width: 2
        },
        data: item.values
    }));
    chartInstance.setOption({
        ...newOption,
        xAxis: {
            ...newOption.xAxis,
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: newOption.yAxis
    }, true);  // 使用true进行配置合并
    
    chartInstance.resize();
}, { deep: true, immediate: true });
</script>
<style scoped lang="scss">
.zxtBox {
    width: 100%;
    height: 100%;
}
</style>